// document 文档对象 顶级的 dom树
// dom 事件监听
const panels = document.querySelectorAll('.panel');
// JS中除了string，number，boolean，undefined，null，其他的都是对象
// 对象的一个子类
// console.log(panels,
//     panels[0],
//     typeof panels[0],//瞎的
//     Object.prototype.toString.call(panels[0])//[object HTMLDivElement]
// );

panels.forEach(function(panel){
    // console.log(panel);
    // 事件监听需要在具体元素上
    panel.addEventListener('click',function(){
        // 点击当前项添加 active 类名
        const cur = document.querySelector('.active');
        if(cur){
            cur.classList.remove('active');
        }
        panel.classList.add('active');
    })
})